<template>
  <el-aside class="el-aside" style="width: 280px">
      <el-menu
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
         text-color="#fff"
         style="height:100%"
      >
      <h2 class="h2">通用后台管理系统</h2>
        <el-sub-menu
          v-for="item in menuList"
          :key="item.path"
          :index="item.path"
        >
          <template #title>
            <component class="icon" :is="item.icon"></component>
            <!-- <el-icon><location /></el-icon> -->
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group
            v-for="subItem in item.children"
            :key="subItem.path"
            :title="subItem.label"
          >
            <el-menu-item
              v-for="subSubItem in subItem.children"
              :key="subSubItem.path"
              :index="subSubItem.path"
            >
            <component class="icon" :is="subItem.icon"></component>
              <span>{{ subSubItem.label }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
   
  </el-aside>
</template>

<script lang="" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ref } from 'vue'

const menuList = ref([
  {
    path: '/home',
    label: '首页',
    icon: 'House',
    children: [
      {
        path: '/home/sub1',
        // label: '子菜单1',
        children: [
          {
            path: '/home/sub1/sub1-1',
            label: '子子菜单1-1',
            icon: 'InfoFilled',
          },
          {
            path: '/home/sub1/sub1-2',
            label: '子子菜单1-2',
            icon: 'InfoFilled',
          },
        ],
      },
      {
        path: '/home/sub2',
        // label: '子菜单2',
        children: [
          {
            path: '/home/sub2/sub2-1',
            label: '子子菜单2-1',
            icon: 'InfoFilled',
          },
          {
            path: '/home/sub2/sub2-2',
            label: '子子菜单2-2',
            icon: 'InfoFilled',
          },
        ],
      },
    ],
  },
  {
    path: '/about',
    label: '关于',
    icon: 'InfoFilled',
    children: [
      {
        path: '/about/sub1',
        // label: '子菜单1',
        children: [
          {
            path: '/about/sub1/sub1-1',
            label: '子子菜单1-1',
            icon: 'InfoFilled',
          },
          {
            path: '/about/sub1/sub1-2',
            label: '子子菜单1-2',
            icon: 'InfoFilled',
          },
        ],
      },
      {
        path: '/about/sub2',
        // label: '子菜单2',
        children: [
          {
            path: '/about/sub2/sub2-1',
            label: '子子菜单2-1',
          },
          {
            path: '/about/sub2/sub2-2',
            label: '子子菜单2-2',
          },
        ],
      },
    ],
  },
])

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style lang="less" scoped>
.el-aside, .el-menu {
  // height: 100%;
  height: calc(100vh - 14px);
  background-color:"#545c64" !important;
}
.el-aside {
  height: calc(100vh - 14px);
  overflow: hidden;
  background-color:"#545c64";
  .h2 {
    line-height: 50px;
    text-align: center;
    color: #fff;
  }
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px

}
</style>